<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar"></view>
	
		<!-- 头部 -->
		<view class="header">
			<view class="user-info">
				<image 
					class="avatar" 
					src="/static/个人头像.png" 
					@click="goToProfile" 
					@error="onAvatarError"
					mode="aspectFill"
				/>
				<text class="title">故障维修</text>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 横幅 -->
			<view class="banner">
				<text class="banner-title">智慧维保</text>
				<text class="banner-subtitle">让报修更简单</text>
			</view>
			
			<!-- 我的维修入口 -->
			<view class="my-repairs-entry" @click="goToMyRepairs">
				<view class="entry-icon green">
					<text class="icon-text">👷</text>
				</view>
				<text class="entry-title">我的维修</text>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goToWorkbench">
				<text class="nav-icon">⊞</text>
				<text class="nav-text">工作台</text>
			</view>
			<view class="nav-item" @click="goToAssetManagement">
				<text class="nav-icon">📦</text>
				<text class="nav-text">资产管理</text>
			</view>
			<view class="nav-item" @click="goToFaultReport">
				<text class="nav-icon">📋</text>
				<text class="nav-text">故障报修</text>
			</view>
			<view class="nav-item active">
				<text class="nav-icon">🔧</text>
				<text class="nav-text">故障维修</text>
			</view>
			<view class="nav-item" @click="goToMore">
				<text class="nav-icon">⋯</text>
				<text class="nav-text">更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from '@/utils/navigation.js'
	
	export default {
		data() {
			return {}
		},
		methods: {
			// 头像加载错误处理
			onAvatarError(e) {
				console.warn('头像加载失败，使用默认头像');
				e.target.src = '/static/banner-bg.jpg';
			},
			
			// 跳转到个人中心
			goToProfile() {
				uni.navigateTo({
					url: '/pages/user/profile'
				});
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['设置', '帮助', '关于'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
			},
			
			goToMyRepairs() {
				uni.navigateTo({
					url: '/pages/repair/my-repairs'
				});
			},
			
			// 底部导航跳转
			goToWorkbench() {
				navigation.goToWorkbench();
			},
			
			goToAssetManagement() {
				navigation.goToAssetManagement();
			},
			
			goToFaultReport() {
				navigation.goToFaultReport();
			},
			
			goToMore() {
				navigation.goToMore();
			}
		}
	}
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f8f8f8;
}

.status-bar {
	height: 44px;
	background-color: white;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: white;
}

.user-info {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
}

.header-action {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-icon {
	font-size: 32rpx;
	color: #666;
}

.main-content {
	flex: 1;
	padding: 20px;
}

.page-title {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.title-icon {
	font-size: 20px;
	margin-right: 8px;
}

.title-text {
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.banner {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	padding: 30px 20px;
	margin-bottom: 30px;
	text-align: right;
	color: white;
}

.banner-title {
	display: block;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 8px;
}

.banner-subtitle {
	display: block;
	font-size: 16px;
	opacity: 0.9;
}

.my-repairs-entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin: 0;
	padding: 15px;
	box-sizing: border-box;
}

.entry-icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.entry-icon.green {
	background-color: #67c23a;
}

.icon-text {
	font-size: 24px;
	color: white;
}

.entry-title {
	font-size: 14px;
	color: #333;
	font-weight: bold;
	text-align: center;
}

.bottom-nav {
	display: flex;
	background-color: white;
	border-top: 1px solid #e0e0e0;
	padding: 8px 0;
}

.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	position: relative;
}

.nav-item.active {
	color: #333;
}

.nav-icon {
	font-size: 20px;
	margin-bottom: 4px;
}

.nav-text {
	font-size: 12px;
	color: #666;
}

.nav-item.active .nav-text {
	color: #333;
}
</style>